import React, { useEffect } from 'react';
import { connect } from 'umi';
import {
  Modal,
  Row,
  Col,
  Input,
  Form,
  TreeSelect,
  Button,
  message,
} from 'antd';

/**
 * 创建公司
 * @param props
 * @returns
 */
const CreatCompanyModel = (props: any) => {
  const { dispatch, loading, visitCompany, setVisitCompany } = props;
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };
  const [form] = Form.useForm();

  useEffect(() => {
    visitCompany && form.resetFields();
  }, [visitCompany]);

  const handleCancel = () => {
    setVisitCompany(false);
  };

  const handleSave = async () => {
    const res = await form.validateFields();
    dispatch({ type: 'enoadRBAC/createCompany', payload: res }).then((res) => {
      if (res) {
        message.success(res.msg);
        setVisitCompany(false);
      }
    });
  };

  return (
    <>
      <Modal
        title={'新建公司'}
        destroyOnClose
        visible={visitCompany}
        width={800}
        getContainer={false}
        maskClosable={false}
        onCancel={handleCancel}
        onOk={handleSave}
        footer={[
          <Button key="back" onClick={handleCancel}>
            取 消
          </Button>,
          <Button
            key="submit"
            loading={loading.effects['enoadRBAC/createCompany']}
            disabled={loading.effects['enoadRBAC/createCompany']}
            type="primary"
            onClick={handleSave}
          >
            确 定
          </Button>,
        ]}
      >
        <Row>
          <Col span={24}>
            <Form form={form}>
              <Form.Item
                {...formItemLayout}
                labelAlign={'left'}
                rules={[{ required: true, message: '请输入公司名称' }]}
                label="公司名称"
                name="companyName"
              >
                <Input
                  style={{ borderRadius: '16px' }}
                  placeholder={'请输入公司名称'}
                  type="input"
                />
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                labelAlign={'left'}
                rules={[{ required: true, message: '请输入公司缩写' }]}
                label="公司缩写"
                name="companyCap"
              >
                <Input
                  style={{ borderRadius: '16px' }}
                  placeholder={'请输入公司缩写'}
                  type="input"
                />
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                labelAlign={'left'}
                rules={[{ required: false, message: '请输入用户数量' }]}
                label="用户数量"
                name="companyNum"
              >
                <Input
                  style={{ borderRadius: '16px' }}
                  placeholder={'请输入用户数量'}
                  type="input"
                />
              </Form.Item>
            </Form>
          </Col>
        </Row>
      </Modal>
    </>
  );
};
//关联到用户权限管理state的models中。
export default connect(({ enoadRBAC, loading }) => ({
  ...enoadRBAC,
  loading,
}))(CreatCompanyModel);
